<template>
   <div class="edit-form" style="padding:20px 20px 20px 20px">
  <el-form
    :roleIds="roleIds"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
    v-loading="loading"
  >
    <el-button class="btn-form-save" type="primary" @click="saveRole">
      确定
    </el-button>
    <div class="invoice-list">
      <br />
      <!-- <el-checkbox-group v-model="checkedRoles" > -->
      <el-card shadow="never">
        <el-row>
          <el-checkbox-group
            v-model="state.checkList"
            @change="handleCheckChange"
          >
            <el-checkbox
              @change="changeRole(item)"
              v-for="(item, index) in state.roles"
              :key="item.id"
              :label="item.id"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
          <!--<el-checkbox style="width: 15%;" v-for="item in roles" :label="item.id" :key="item.id"  @change="handleCheckChange" v-model="checkList[index]>{{item.name}}</el-checkbox>-->
        </el-row>
      </el-card>
      <!-- </el-checkbox-group> -->
    </div>
  </el-form>
</div>
</template>

<script setup>
import { ref, reactive, onBeforeMount } from 'vue'
import { getRoleInfos, getAllRoleInfos } from '@/api/system'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useUserStore } from '@/pinia/modules/user'
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus
} from '@element-plus/icons-vue'
const emit = defineEmits(['saveRole', 'close'])

const props = defineProps({
  checkedRoles: [],
  roleIds: String
})

const loading = ref(false)
let state = reactive({
  roles: [],
  role: [],
  checkList: [],
  page: {
    userId: '',
    roleIds: ''
  }
})

const getRole = async () => {
  loading.value = true
  let result = await getRoleInfos(props.roleIds)
  if (result.succeed) {
    let r = result.data
    state.role = r.map((r2, v2) => {
      var arr = []
      result.data.forEach(function (item, index) {
        arr.push(item.id)
      })

      state.checkList = arr
    })
    loading.value = false
  }
}
const getRoleList = async () => {
  let result = await getAllRoleInfos({})
  if (result.succeed) {
    let res = result.data.filter(item=>{
      return item.name != '养老机构' && item.name != '社区机构'
    })
    state.roles = res
  }
}
const saveRole = () => {
  state.page.userId = props.roleIds
  state.page.roleIds = state.checkList.join(',')
  emit('saveRole', state.page)
}
const handleCheckChange = val => {}
const changeRole = myVal => {}
const close = () => {
  emit('close')
}

onBeforeMount(() => {
  //当前用户角色
  getRole()
  //获取所有用户角色
  getRoleList()
})
</script>
<style scoped></style>
